<!DOCTYPE html><html><head>
	<meta charset="utf-8">
 <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">	<meta name="description" content="">
	<title>异步加载 170 万个数据</title>
	<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
	<script src="https://img.hcharts.cn/highstock/highstock.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
</head>
<body>
<!--
*************************************************************************
    Generated by HCODE at 2017-05-05 16:02:45
    From: https://code.hcharts.cn/highstock/hhhhvT
*************************************************************************
-->
<div id="container" style="min-width:400px;height:400px"></div>

	<script>
	$(function () {
    /**
     * Load new data depending on the selected min and max
     */
    function afterSetExtremes(e) {
        var chart = $('#container').highcharts();
        chart.showLoading('Loading data from server...');
        $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
                  '&end=' + Math.round(e.max) + '&callback=?', function (data) {
            chart.series[0].setData(data);
            chart.hideLoading();
        });
    }
    // See source code from the JSONP handler at https://github.com/highslide-software/highcharts.com/blob/master/samples/data/from-sql.php
    $.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
        // Add a null value for the end date
        data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
        // create the chart
        $('#container').highcharts('StockChart', {
            chart : {
                type: 'candlestick',
                zoomType: 'x'
            },
            navigator : {
                adaptToUpdatedData: false,
                series : {
                    data : data
                }
            },
            scrollbar: {
                liveRedraw: false
            },
            title: {
                text: 'AAPL history by the minute from 1998 to 2011'
            },
            subtitle: {
                text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
            },
            rangeSelector : {
                buttons: [{
                    type: 'hour',
                    count: 1,
                    text: '1h'
                }, {
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: false, // it supports only days
                selected : 4 // all
            },
            xAxis : {
                events : {
                    afterSetExtremes : afterSetExtremes
                },
                minRange: 3600 * 1000 // one hour
            },
            yAxis: {
                floor: 0
            },
            series : [{
                data : data,
                dataGrouping: {
                    enabled: false
                }
            }]
        });
    });
});
</script>

</body></html>